<template>
  <div class="content">
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item
          ><div class="div1">数据查询</div></el-breadcrumb-item
        >

        <el-breadcrumb-item
          v-if="query.warId == -1"
          :to="{ path: '/logisticsSystem/productData' }"
          ><div class="div1">产品数据</div></el-breadcrumb-item
        >
        <el-breadcrumb-item
          v-if="query.warId == 1"
          :to="{ path: '/logisticsSystem/warehouseData' }"
          ><div class="div1">仓库数据</div></el-breadcrumb-item
        >

        <el-breadcrumb-item
          ><div class="div2">产品数据详情</div></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="query">
      <div class="title">查询商品</div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item class="formItem" label="时间">
          <el-date-picker
            size="mini"
            v-model="form.date"
            type="month"
            placeholder="选择日期"
            format="yyyy-MM"
            value-format="yyyy-MM"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item class="formItem" label="仓库">
          <el-select
            @change="foreceUpdate"
            clearable
            v-model="form.warId"
            size="mini"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-button
          style="margin-right: 0px"
          size="mini"
          type="primary"
          @click="params"
          >搜索出库数据</el-button
        >
      </el-form>
    </div>
    <div class="middle">
      <el-row>
        <el-col :span="8"
          ><div class="left">
            <div class="title"><span>产品信息</span></div>
            <el-image
              style="width: 100px; height: 100px"
              :src="img(tableData.image)"
              fit="cover"
            ></el-image>
            <div>
              <div>
                <div class="text">
                  <span>商品名称:</span>
                  <div style="margin-left: 10px">{{ tableData.title }}</div>
                </div>
                <div class="text">
                  <span>商品品牌: </span>
                  <div style="margin-left: 10px">{{ tableData.brandName }}</div>
                </div>
                <div class="text">
                  <span>商品单价: </span>
                  <div style="margin-left: 10px">{{ tableData.sellPrice }}</div>
                </div>
                <div class="text">
                  <span>出库排行: </span>
                  <div style="margin-left: 10px">{{ tableData.sellPrice }}</div>
                </div>
                <div class="text">
                  <span>总库存: </span>
                  <div style="margin-left: 10px">
                    {{ tableData.quantityStock }}
                  </div>
                </div>
                <div class="text">
                  <span>出库总数: </span>
                  <div style="margin-left: 10px">{{ tableData.outNumber }}</div>
                </div>
                <div class="text">
                  <span>出库总额: </span>
                  <div style="margin-left: 10px">{{ tableData.price }}</div>
                </div>

                <div class="text">
                  <span>入库总数: </span>
                  <div style="margin-left: 10px">{{ tableData.inNumber }}</div>
                </div>
              </div>
              <div style="position: relative;">
                <div
                  style="position: absolute;
    right: 0;
    bottom: 0;"
                >
                  <div class="text" v-for="item in tableData.warehouses">
                    <span>{{ item.warName }}: </span>
                    <div style="margin-left: 10px">{{ item.number }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div></el-col
        >
        <el-col class="right" :span="16">
          <div id="chartLineBox" style="width: 100%; height: 450px"></div>
          <div class="lineBoxText">
            {{
              tableData.month
                ? tableData.month.substring(5, 7)
                : new Date().getMonth()
            }}月
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="bottom">
      <div class="title">销售排行</div>
      <div class="context">
        <div
          class="contextBd"
          v-for="item in tableData.salesRanking"
          :key="item.label"
        >
          <span class="top">{{ item.label }}</span>
          <span class="bottom">{{ item.value }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/shine");
export default {
  data() {
    return {
      chartLine: null,
      form: {
        date: "",
        warId: "",
      },
      tableData: {},
      options: [],
      value: "",
      query: {
        cId: "",
        warId: "",
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() >= Date.now() - 8.64e7;
        },
      },
      tempData: [
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
      ],
    };
  },
  activated() {
    if (this.$route.query.cId && this.query.cId !== this.$route.query.cId) {
      this.form = { date: "" };
    }
    if (this.$route.query.warId || this.$route.query.warId === -1) {
      this.query = this.$route.query;
      this.getList(
        this.query.warId !== -1 ? this.query.warId : "",
        this.query.cId
      );
      this.$nextTick(() => {
        setTimeout(() => {
          this.drawLineChart();
          setTimeout(() => {
            this.chartLine.resize();
          });
        }, 2000);
      });
    }
  },
  created() {
    this.axios.get("/order/comm/commodity/selectCommWarehouse?").then((res) => {
      this.options = res.data;
    });
  },
  methods: {
    foreceUpdate(e) {
      this.$forceUpdate();
    },
    wareNumber(e) {
      let temp = 0;
      if (this.tableData && this.tableData.warehouses) {
        temp = this.tableData.warehouses.find((v) => v.warName === e)
          ? this.tableData.warehouses.find((v) => v.warName === e).number
          : 0;
      }
      return temp;
    },
    getList(warId, cId) {
      if (warId != -1 && !this.form.warId) {
        this.form.warId = Number(warId);
      }
      this.axios
        .get(
          `/order/warehouseCom/findWarCommodityById?cid=${cId}&startTime=${
            this.form.date
          }&endTime=&warId=${this.form.warId ? this.form.warId : ""}&type=${
            this.$route.query.type
          }`
        )
        .then((res) => {
          this.tempData = [
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
          ];
          this.tableData = res.data;
          for (let temp of res.data.outStockDate) {
            this.tempData[Number(temp.label) - 2] = temp.value;
          }
          this.drawLineChart();
        });
    },
    img(img) {
      return this.ImgHttps + img;
    },
    onSubmit() {},
    params() {
      this.getList(
        this.query.warId !== -1 ? this.query.warId : "",
        this.query.cId
      );
    },
    drawLineChart() {
      this.chartLine = echarts.init(
        document.getElementById("chartLineBox"),
        null,
        {
          renderer: "svg",
        }
      );

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          //设置tip提示
          trigger: "axis",
        },

        legend: {
          //设置区分（哪条线属于什么）
          data: [""],
        },
        color: ["#2F7DE0"], //设置区分（每条线是什么颜色，和 legend 一一对应）
        xAxis: {
          //设置x轴
          type: "category",
          interval: 0,
          minInterval: 1,
          boundaryGap: true, //坐标轴两边不留白
          data: [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
            "25",
            "26",
            "27",
            "28",
            "29",
            "30",
            "31",
          ],
          name: "", //X轴 name
          nameTextStyle: {
            //坐标轴名称的文字样式
            color: "#000",
            fontSize: 16,
            padding: [0, 0, 0, 20],
          },
          axisLine: {
            //坐标轴轴线相关设置。
            lineStyle: {
              color: "#000",
            },
          },
        },
        yAxis: {
          name: "出库数据",
          nameTextStyle: {
            color: "#000",
            fontSize: 16,
            padding: [0, 50, 10, 0],
            fontWeight: "600",
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontWeight: "600",
            },
          },

          axisLine: {
            lineStyle: {
              color: "#000",
            },
          },
          type: "value",
        },
        series: [
          {
            name: "平均成绩",
            data: this.tempData,
            type: "line", // 类型为折线图
            lineStyle: {
              // 线条样式 => 必须使用normal属性
              normal: {
                color: "#2F7DE0",
              },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      this.chartLine.setOption(option);
      window.onresize = () => {
        this.chartLine.resize();
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  font-size: 15px;
  .div1 {
    margin-left: -16px;
    background: url(../../../../assets/breadcrumb2.png);
    width: 120px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #2d7edf;
  }
  .div2 {
    margin-left: -16px;
    background: url(../../../../assets/breadcrumb1.png);
    width: 110px;
    font-size: 13px;
    padding-left: 10px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #fff;
  }
  span {
    word-break: keep-all;
    white-space: nowrap;
  }
  .query {
    background: #fff;
    padding: 10px 20px;
    line-height: 40px;
    .title {
      border-bottom: 1px solid #eee;
      padding-bottom: 5px;
      color: #2d7edf;
      margin-bottom: 10px;
    }
    .formItem {
      display: inline-block;
      margin-right: 20px;
    }
    /deep/.el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 170px;
    }
    /deep/.el-input__inner {
      width: 170px;
    }
  }
  .middle {
    margin-top: 10px;
    background: #fff;
    .title {
      font-size: #333333;
      font-weight: 550;
    }
    .left {
      line-height: 50px;
      border-right: 10px solid #f5f5f5;
      padding: 10px 20px;
      color: #676767;
      .text {
        display: flex;
      }
    }
    .right {
      padding: 10px 20px;
      display: flex;
      .lineBoxText {
        position: absolute;
        right: 50px;
        font-size: 20px;
      }
    }
  }
  .bottom {
    padding: 10px 20px;
    background: #fff;
    margin-top: 10px;
    position: relative;
    .title {
      font-size: #333333;
      font-weight: 550;
    }
    .context {
      display: flex;
      height: 90px;
      justify-content: space-evenly;
      .contextBd {
        display: flex;
        flex-direction: column;
        align-items: center;
        .top {
          font-size: 14px;
        }
        .bottom {
          font-size: 20px;
          color: red;
          font-weight: 600;
        }
      }
    }
  }
}
</style>
